<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影厅列表</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios0.18.js"></script>
</head>
<body>
<div id="app" style="width: 100%">
    <table style="text-align: center;border-collapse: collapse;border: black solid 1px;width: 1000px;margin: auto">
        <tr style="border: black solid 1px;">
            <th style="border: black solid 1px;">影厅名</th>
            <th style="border: black solid 1px;">座位信息</th>
            <th style="border: black solid 1px;">状态</th>
        </tr>
        <tr v-for="item in houseList" style="border: black solid 1px;">
            <td style="border: black solid 1px;">{{item.chName}}</td>
            <td style="border: black solid 1px;">
                <table style="width: 100%">
                    <tr v-for="(row,i) in JSON.parse(item.chSeatInfo)">
                        <td v-for="(col,j) in row">
                            <span v-if="col===0"><img src="../../img/seat.png" width="15"> </span>
                            <span v-if="col===1"><img src="../../img/noseat.png" width="15"> </span>
                        </td>
                    </tr>
                </table>
            </td>
            <td style="border: black solid 1px;" v-if="item.chState===0">封禁</td>
            <td style="border: black solid 1px;" v-if="item.chState===1">正常</td>
        </tr>
    </table>
</div>

</body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            houseList: []
        },
        methods: {
            getHouseList() {
                let _this = this;
                axios.post("http://localhost:8080/ssm/cinema/getHouseList")
                    .then(function (resp) {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            _this.houseList = resp.data.data;
                        } else {
                            alert(resp.data.msg);
                        }
                    });
            }
        },
        mounted() {
            this.getHouseList();
        }
    })
</script>

